<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElLoading } from "element-plus";
import { homeHeadData, homeMonthData } from "@/http/api";
import * as echarts from "echarts";

export default {
  components: { outMain },
  name: "",
  data() {
    return {
      headData: {},
      cardArr: [
        {
          name: "新增渠道商",
          num: "- -",
          num_: "- -",
        },
        {
          name: "新增授权",
          num: "- -",
          num_: "- -",
        },
        {
          name: "累计授权",
          num: "- -",
          num_: "- -",
        },
        {
          name: "新增用户",
          num: "- -",
          num_: "- -",
        },
      ],
    };
  },
  props: {},
  setup() {},
  methods: {
    setCode(resData) {
      let chart = echarts.init(this.$refs.echartCode);
      let xAxisData = [];
      for (let a in resData.swcp_count) {
        xAxisData.push(a);
      }
      let swData = [];
      for (let a in resData.swcp_count) {
        swData.push(resData.swcp_count[a]);
      }
      let sjData = [];
      for (let a in resData.sjzc_count) {
        sjData.push(resData.sjzc_count[a]);
      }
      let option = {
        title: {
          text: "近12个月数据统计",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: xAxisData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "渠道商",
            type: "line",
            data: swData,
          },
          {
            name: "用户",
            type: "line",
            data: sjData,
          },
          {
            name: "新增授权",
            type: "line",
            data: swData,
          },
          {
            name: "已授权",
            type: "line",
            data: sjData,
          },
        ],
      };
      chart.setOption(option);
    },
    async getHeadData() {
      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      const { data } = await homeHeadData();
      setTimeout(() => {
        loading.close();
      }, 100);
      if (data.code == 1) {
        let headData = data.data;
        this.cardArr = [
          {
            name: "新增渠道商",
            num: headData.today_tj.jyze,
            num_: headData.total_tj.jyze,
          },
          {
            name: "新增授权",
            num: headData.today_tj.jydd,
            num_: headData.total_tj.jydd,
          },
          {
            name: "累计授权",
            num: headData.today_tj.xzyh,
            num_: headData.total_tj.xzyh,
          },
          {
            name: "新增用户",
            num: headData.today_tj.xzyh,
            num_: headData.total_tj.xzyh,
          },
        ];
        this.getMonthData();
      }
    },
    async getMonthData() {
      const { data } = await homeMonthData();
      if (data.code == 1) {
        this.setCode(data.data);
      }
    },
  },
  mounted() {
    // this.getHeadData();
  },
  created() {},
};
</script>
<template>
  <outMain>
    <div class="formCont noPadding">
      <div class="homeHead">渠道网点可视化</div>
      <div class="homeMain">
        <div class="headCardFlex">
          <div class="cardItem" :key="index" v-for="(item, index) in cardArr">
            <div class="cardName">{{ item.name }}</div>
            <div class="cardUnder">
              <div class="cardInfo flexCont">
                <div class="cardInfoItem">
                  <div class="cardInfoName">今日</div>
                  <div class="cardNum">{{ item.num }}</div>
                </div>
                <div class="cardInfoItem">
                  <div class="cardInfoName">累积</div>
                  <div class="cardNum">{{ item.num_ }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="echartCard">
          <div class="echartCont" ref="echartCode"></div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less">
.formCont {
  width: 100%;
  height: 100%;
  background: #f3f5fb;
  background-image: url("/img/homeBanner.png");
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 0 10px #ddd;
  display: flex;
  flex-direction: column;
  border-radius: 10px 10px 10px 10px;
  .homeHead {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    padding-top: 15px;
  }
  .homeMain {
    padding: 15px;
    flex: 1;
    height: 100px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    .headCardFlex {
      width: 100%;
      padding-top: 20px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .cardItem {
        background-color: #fff;
        // background-image: linear-gradient(to right bottom, #7a80dd, #d2d5ff);
        border-radius: 15px;
        // margin: 20px 0;
        width: 25%;
        margin-left: 20px;
        overflow: hidden;
        .cardName {
          background-color: #4b58dc;
          padding: 8px 10px;
          box-sizing: border-box;
          color: #fff;
          font-size: 13px;
        }
        .cardUnder {
          padding: 15px;
          box-sizing: border-box;
          position: relative;
          .cardInfo {
            font-size: 12px;
            .cardInfoItem {
              width: 50%;
              text-align: center;
              .cardInfoName {
                font-size: 12px;
                margin-bottom: 5px;
              }
              .cardNum {
                font-size: 20px;
              }
            }
          }
          .flexCont {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
          }
        }
      }
      .cardItem:first-child {
        margin-left: 0;
      }
    }
    .echartCard {
      background-color: #fff;
      padding: 10px;
      flex: 1;
      width: 100%;
      height: 100px;
      border-radius: 15px;
      box-sizing: border-box;
      .echartCont {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.noPadding {
  padding: 0;
}
</style>
